<template>
  <el-input
    :model-value="formatValue"
    type="text"
    @input="inputHandle"
    @change="blurHandle"
    v-bind="$attrs"
    placeholder="请输入"
  >
    <template v-slot:append v-if="unit">{{ unit }}</template>
  </el-input>
</template>
<script setup>
import { computed } from "vue";

const props = defineProps({
  unit: {
    type: String,
    default: "",
  },
  float: {
    type: [Number, String],
    default: 0,
  },
  valueUnit: {
    // 金额单位， 如果单位分传100， 单位元传1
    type: [Number, String],
    default: 1,
  },
});
const model = defineModel({
  default: 0,
});

const formatValue = computed(() => {
  return model.value / props.valueUnit;
});
const inputHandle = (val) => {
  if (props.float == 0) {
    val = Number(val.replace(/[^\d]/g, ""));
  } else {
    console.log("[ props.float ] >", props.float);
    // 支持的小数位数
  }
  if (isNaN(Number(val))) {
    val = 0;
  }
  console.log("[ model.value ] >", model.value);
  model.value = (val * props.valueUnit).toFixed(props.float);
};

const blurHandle = (val) => {
  model.value = Number(val / props.valueUnit);
};
</script>
